<template>
    <div>
        <!--修改密码弹框-->
        <el-dialog
                title="修改密码"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="closePassBox"
        >
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="ruleForm.newPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="retypeNewPassword">
                    <el-input type="password" v-model="ruleForm.retypeNewPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--学校信息-->
        <el-dialog
                title="个人信息"
                :visible.sync="scDiag"
                width="30%"
                :before-close="closePassBox"
        >
            <el-form :model="userInfo" status-icon ref="stuInfo" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="oldPass">
                    <el-input v-model="userInfo.logincode" autocomplete="off"
                              :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-input
                            :disabled="true"
                            v-model="userInfo.roleName">
                    </el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-header height="100px" style="padding:0">
            <div class="title">
                <span class="topText">技能扶贫培训就业管理平台</span>
                <div class="topNav">
                    <span @click="showInfo()">
                        <i class="el-icon-user"></i>
                        个人信息
                    </span>
                    <span @click="dialogVisible = true">
                        <i class="el-icon-unlock"></i>
                        修改密码
                    </span>
                    <span @click="loginOut()">
                        <i class="el-icon-circle-close"></i>
                        退出登录
                    </span>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="240px">
                <el-menu
                        class="sidebar-el-menu"
                        :router="true"
                        :default-active="this.$route.name"
                        background-color="#606266"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        @select="handleSelect">
                    <div v-for="(m,index) in menus">
                        <el-menu-item :index="m.url" v-if="m.children.length==0">
                            <span slot="title">{{m.name}}</span>
                        </el-menu-item>

                        <el-submenu :index="m.url" v-else>
                            <template slot="title">
                                <span>{{m.name}}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item :index="c.url" v-for="c in m.children" :key="c.id">{{c.name}}
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </div>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import {updatePassword, getUserRoleInfo} from "@/api/roleApi";
    import {getMenuByUser} from "@/api/menuApi";
    import eventBus from "@/utils/eventBus";
    import {removeCookie} from "@/utils/auth";
    import router from "../router";

    export default {
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                menus: [],
                dialogVisible: false,
                scDiag: false,
                userInfo: {logincode: null, roleName: null},
                ruleForm: {
                    oldPassword: null,
                    newPassword: null,
                    retypeNewPassword: null
                },
                rules: {
                    oldPassword: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                    ],
                    newPassword: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 5, max: 12, message: '长度在 5 到 12个字符'},
                        {pattern: /^(\w){5,12}$/, message: '只能输入5-25个字母、数字、下划线'}
                    ],
                    retypeNewPassword: [
                        {validator: validatePass2, trigger: 'blur'}
                    ]
                }
            }
        },

        created() {
            let ms = JSON.parse(localStorage.getItem('menus'));
            this.menus = ms ? ms : [];
            this.subscriptionEvent();
        },
        methods: {
            //订阅事件
            subscriptionEvent() {
                eventBus.$on('search_userMenu', data => {
                    this.getUserMenus();
                });
            },
            //获取用户菜单
            getUserMenus() {
                getMenuByUser().then(res => {
                    this.menus = res;
                    localStorage.setItem('menus', JSON.stringify(res));

                })

            },
            //退出登录
            loginOut() {
                localStorage.removeItem('menus');
                removeCookie('ACCESSTOKEN');
                this.$message.success("退出成功");
                this.$router.push({path: 'login'})
            },
            handleSelect(key, keyPath) {
            },
            getUserInfo() {
                const d = {
                    page: 1,
                    pageSize: 2
                }
                this.$store.dispatch('userInfo/getUserInfo', d).then(res => {
                    console.log(res);
                }).catch(_ => {
                    this.$message.error(res.data.msg);
                });
            },
            //修改密码
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = `oldPassword=${this.ruleForm.oldPassword}&newPassword=${this.ruleForm.newPassword}&retypeNewPassword=${this.ruleForm.retypeNewPassword}`;
                        updatePassword(url).then(res => {
                            this.$message.success("修改成功");
                        })
                    } else {
                        return false;
                    }
                });
            },
            //查看个人信息
            showInfo() {
                this.scDiag = true;
                getUserRoleInfo().then(res => {
                    this.userInfo = res;
                })
            },
            // 重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 关闭修改密码
            closePassBox(done) {
                done();
                this.resetForm('ruleForm');
            }
        },
    }
</script>

<style lang="scss">
    .el-menu {
        overflow: hidden;
    }

    .el-menu-item {
        /*margin-left: 20%;*/
        text-align: center;
    }

    .el-submenu__title {
        text-align: center;
        /*margin-left: 20%;*/
    }

    .title {
        background: #409EFF;
        height: 60px;
        padding: 20px;

        .topText {
            display: block;
            float: left;
            color: #fff;
            font-size: 28px;
            line-height: 60px;
            font-weight: bold;

        }

        .topNav {
            width: 360px;
            float: right;
            height: 60px;

            span {
                text-align: center;
                display: block;
                float: left;
                color: #fff;
                margin-left: 20px;
                width: 100px;
                cursor: pointer;

                i {
                    display: block;
                    text-align: center;
                    font-size: 30px;
                }

                &:hover {
                    color: #FDF6EC
                }
            }
        }
    }

    .el-aside {
        height: 89vh;
        margin-right: 20px;
    }

    .el-main {
        background: #fff;
    }

    .el-menu {
        background: red;
        height: 100%
    }

    .el-menu-item {
        font-size: 16px;
    }

    .el-submenu__title {
        font-size: 16px;
    }

    .el-submenu__title i {
        color: #fff;
        font-size: 16px;
    }
</style>